<a href="<?php echo $this->url(array('action' => 'index'), 'example_action'); ?>"><?php echo BaseZF::escape(_('Back to example index')); ?></a>

<h2><?php echo BaseZF::escape(_('Sortable Lists Demo')); ?></h2>

<style>
ul {
    height:150px;
    width:200px;
}

ul.sortablelist {
    list-style-image:none;
    list-style-type:none;
    margin:0px;
    padding:0px;
    }
ul.sortabledemo li {
    margin:0px;
    padding:0px;
    list-style-image:none;
    list-style-type:none;
}
span.handle {
    background-color:#E8A400;
    color:white;
    cursor:move;
}
li.green {
    background-color:#ECF3E1;
    border:1px solid #C5DEA1;
cursor:move;
}
li.orange {
    background-color:#FFF4D8;
    border:1px solid #E8A400;
}
</style>

<div style="height:200px;">

    <div style="float:left;">
        <h3><?php echo BaseZF::escape(_('This is the first list')); ?></h3>
        <ul class="sortabledemo" id="firstlist">
            <li class="green" id="firstlist_firstlist1">Item 1 from first list.</li>
            <li class="green" id="firstlist_firstlist2">Item 2 from first list.</li>
            <li class="green" id="firstlist_firstlist3">Item 3 from first list.</li>
        </ul>
    </div>

    <div style="float:left;">
        <h3><?php echo BaseZF::escape(_('And now the second list')); ?></h3>
        <ul class="sortabledemo" id="secondlist">
            <li class="orange" id="secondlist_secondlist1">
                <span class="handle">DRAG HERE</span> Item 1 from second list.
            </li>
            <li class="orange" id="secondlist_secondlist2">
                <span class="handle">DRAG HERE</span> Item 2 from second list.
            </li>
            <li class="orange" id="secondlist_secondlist3">
                <span class="handle">DRAG HERE</span> Item 3 from second list.
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript">
// <![CDATA[
    Sortable.create("firstlist",
    {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false});
    Sortable.create("secondlist",
    {dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist"],constraint:false});
// ]]>
</script>

